<template>
    <div :style="styleItem">
      <!-- :style="{height: styleItem.height, width: styleItem.width}" -->
      <div id="VirtualPandian"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  export default {
    name: "VirtualPandian",
    props: {
      styleItem: {
        type: Object,
        default: () => {},
      },
      boxStatusData: {
        type: Array,
        default: () => [],
      },
      xData: {
        type: Array,
        default: () => [],
      },
      data1: {
        type: Array,
        default: () => [],
      },
      totalNum: {
        type: Number,
        default: 0,
      },
      danganTotal: {
        type: Number,
        default: 0,
      },
      restNum: {
        type: Number,
        default: 0,
      },
      depotId: {
        type: String,
        default: null,
      }
    },
    data() {
      return {
        myChart: null,
      };
    },
    mounted() {
      this.showChart();
    },
    methods: {
      reloadChart() {
        this.myChart.clear();
        this.showChart();
      },
      showChart() {
        // 窍状态
        //   if (this.myChart != null && this.myChart != "" && this.myChart != "undefined") {
        //     this.myChart.clear();
        //     // console.log(legenddata, valuedata);
        //     //   this.myChart.clear();
        //   }
        // 基于准备好的dom，初始化echarts实例
  
        let chartDom = document.getElementById("VirtualPandian");
        this.myChart = echarts.init(chartDom);
  
        //   this.myChart = echarts.init(document.getElementById("VirtualPandian"));
  
  
        var option;
        // var color = ["rgb(0, 255, 94)", "rgb(251, 186, 74)", "rgb(2, 192, 244)"];
        var color = [ '#02C1F4', '#FBBB4A']
        console.log(1111111, this.boxStatusData, 'this.boxStatusData')
        // let trafficWay = this.boxStatusData
        let trafficWay = [
          // { value: 0, name: "已盘点" },
          // { value: this.totalNum - this.restNum, name: "未盘点" }
          this.depotId == 100000 && { value: this.danganTotal, name: "已盘点" },
          this.depotId != 100000 && { value: this.totalNum - this.restNum, name: "已盘点" },
          { value: 0, name: "未盘点" }
        ].filter(item => item)
  
        var total = 0;
        for (var i = 0; i < trafficWay.length; i++) {
          total += trafficWay[i].value;
        }
  
        option = {
          // title: {
          //   text: "Referer of a Website",
          //   subtext: "Fake Data",
          //   left: "center",
          // },
          title: {
            text: `盘点量`,
            itemGap: this.$fontSize.fontSize(0.1),
            subtextStyle: {
              color: "#fff",
              fontSize: this.$fontSize.fontSize(0.16),
            },
            subtext: total.toString(),
            top: "40%",
            textAlign: "center",
            left: "49%",
            textStyle: {
              color: "#fff",
              fontSize: this.$fontSize.fontSize(0.14),
              fontWeight: "400",
            },
          },
          tooltip: {
            trigger: "item",
          },
          color: color,
          // legend: {
          //   orient: "vertical",
          //   left: "left",
          // },
          series: [
            {
              name: "",
              type: "pie",
              clockWise: false,
              radius: ["45%", "60%"],
              hoverAnimation: false,
              startAngle: "45", // 
              minAngle: 1, //最小角度
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "outside",
                    color: color[i],
                    lineHeight: this.$fontSize.fontSize(0.18),
                    fontSize: this.$fontSize.fontSize(0.12),
                    formatter: function(params) {
                      var percent = 0;
  
                      percent = ((params.value / total) * 100).toFixed(0);
                      if (params.name !== "") {
                        return (
                          "\n" +
                          "\n" +
                          params.name +
                          "\n" +
                          "数量：" +
                          params.value +
                          "\n"
                          // "占比：" +
                          // percent +
                          // "%"
                        );
                      } else {
                        return "";
                      }
                    },
                  },
                  labelLine: {
                    length: this.$fontSize.fontSize(0.2),
                    length2: this.$fontSize.fontSize(0.3),
                    show: true,
                    color: "#00ffff",
                  },
                },
              },
              data: trafficWay,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
  
        option && this.myChart.setOption(option, true, true);
      },
    },
  };
  </script>
  
  <style lang="scss">
  #VirtualPandian {
    width: 100%;
    height: 24vh;
  }
  </style>
  